<template>
  <div class="card-item">
    <div class="card-header">
      <span class="card-index">{{ indexLabel }}</span>
      <div class="card-actions">
        <button @click="edit" class="edit-button">编辑</button>
        <button @click="deleteCard" class="delete-button">删除</button>
        <button @click="exportSingle" class="export-button">导出</button>
      </div>
    </div>
    
    <div v-if="!isEditing" class="card-content">
      <div class="card-question">
        <strong>问题：</strong>
        <p>{{ card.question }}</p>
      </div>
      <div class="card-answer">
        <strong>答案：</strong>
        <p>{{ card.answer }}</p>
      </div>
    </div>
    
    <div v-else class="card-edit-form">
      <div class="form-group">
        <label>问题：</label>
        <textarea v-model="editForm.question" rows="3"></textarea>
      </div>
      <div class="form-group">
        <label>答案：</label>
        <textarea v-model="editForm.answer" rows="3"></textarea>
      </div>
      <div class="edit-actions">
        <button @click="save" class="save-button">保存</button>
        <button @click="cancel" class="cancel-button">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CardItem',
  props: {
    card: {
      type: Object,
      required: true
    },
    index: {
      type: Number,
      required: true
    },
    isEditing: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editForm: {
        question: this.card.question,
        answer: this.card.answer
      }
    }
  },
  computed: {
    indexLabel() {
      return `#${this.index + 1}`;
    }
  },
  watch: {
    card() {
      this.editForm.question = this.card.question;
      this.editForm.answer = this.card.answer;
    }
  },
  methods: {
    edit() {
      this.$emit('edit', this.index);
    },
    deleteCard() {
      this.$emit('delete', this.index);
    },
    exportSingle() {
      this.$emit('export', this.index);
    },
    save() {
      this.$emit('save', this.index, this.editForm);
    },
    cancel() {
      this.$emit('cancel-edit');
    }
  }
}
</script>